<template>
  <div class="myMain">
    <div class="my">
      <div class="header">
        <div class="bgc"><img
            src="https://tse4-mm.cn.bing.net/th/id/OIP-C.qNM9iH0AxhlSBw9bhN1EZwAAAA?w=198&h=199&c=7&r=0&o=5&pid=1.7"
            alt="">
        </div>
        <div class="userMage"><img :src="user.userInfo.avatar" alt=""></div>
      </div>
      <div class="message">
        <div class="head">
          <van-button type="success" style="width: 5rem;" round @click="changeAttentState">{{ isattent ? '已关注' : '关注' }}</van-button>
          <van-button type="success" style="width: 5rem;" round @click="gochat">私信</van-button>
        </div>
        <div class="main">
          <div class="username">{{ user.userInfo.nickname }}</div>
          <div class="sname">{{ user.userInfo.brief_intro }}</div>
        </div>
      </div>
      <div class="action">
        <div class="head">发布动态</div>
      </div>
    </div>
    <div class="hiden"></div>
    <div class="history">
      <InfoCardList :list="user.personalCardList"></InfoCardList>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import InfoCardList from '@/components/InfoCardList.vue';
import { userStore } from '@/store/index';
import { ref } from 'vue';
import {setAttent} from '@/api/index'
import { useRouter } from 'vue-router';
const router = useRouter()
const id: any = router.currentRoute.value.query.id

const user = userStore()
const isattent = ref(false)
const gochat=()=>{
  router.push({
    path:'/ChatInterface',
    query:{
      id:id
    }
  })
}
const changeAttentState = () => {
  setAttent({
    follower_Id:id, userId:user.userInfo.user_id,
    isattent:isattent.value
  }).then(_res=>{
    isattent.value=!isattent.value  
  })
}
</script>
  
<style lang="less"  scoped>
@import url('//at.alicdn.com/t/c/font_4209292_cr3qdmdpoiv.css');

.myMain {
  .my {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;

    .header {
      position: relative;
      top: 0;
      width: 100%;
      height: 13rem;
    }

    .header .bgc {
      width: 100%;
      height: 12rem;
      overflow: hidden;

    }

    .header .bgc img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      filter: blur(0.5rem);
    }

    .userMage {
      position: absolute;
      bottom: 0;
      left: 1rem;
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      border: 0.3rem solid #fff;
      background-color: red;
      overflow: hidden;
      z-index: 1;
    }

    .userMage img {
      width: 100%;
      height: 100%;
    }

    .message {
      position: relative;
      width: 100%;
      min-height: 5rem;
      background-color: #fff;
      overflow: hidden;
      margin-top: -2rem;
      border-radius: 0.5rem;


    }

    .message .head {
      position: relative;
      box-sizing: border-box;
      padding-top: 1rem;
      display: flex;
      justify-content: flex-end;
      padding-right: 1.2rem;
      gap: 1.2rem;
      overflow: hidden;
    }

    .message .head .sex {
      position: absolute;
      bottom: 0.5rem;
      left: 5.5rem;
    }

    .main {
      width: 90%;
      min-height: 5rem;
      margin-left: 2rem;
    }

    .main div {
      margin-bottom: 0.5rem;
    }

    .main .username {
      font-size: 1.2rem;
    }

    .main .sname {
      font-size: 0.5rem;
      color: rgb(125, 123, 123);
    }

    .action {
      background-color: #fff;
      margin-top: -1.2rem;
    }

    .action .head {
      margin: 1rem 0;
      padding-left: 1rem
    }
  }

  .hiden {
    width: 100%;
    height: 5rem;
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 2;
  }

  .history {
    width: 100%;
    position: absolute;
    top: 21.5rem;
  }
}
</style>
  